<template>
  <div class="app-container">
    <el-row>
      <el-button type="success" @click="open(1)">添加</el-button>
    </el-row>
    <el-table
      :data="Xgbdymjzsj"
      style="width: 100%"
    >
      <el-table-column
        prop="nld"
        label="年龄段"
        width="180"
      />
      <el-table-column
        prop="ydz"
        label="第一针人数"
        width="180"
      />
      <el-table-column
        prop="yez"
        label="第二针人数"
      />
      <el-table-column
        prop="ysz"
        label="第三针人数"
      />
      <el-table-column
        prop="jqz"
        label="加强针人数"
      />
      <el-table-column
        prop="CreateTime"
        label="创建时间"
      >
        <template slot-scope="scope">
          {{ strToDateStr(scope.row.CreateTime) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="ID"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button size="small" @click="edit(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="del(scope.row.Id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 10px;">
      <el-pagination
        background
        layout=" ->,total, prev, pager, next, jumper"
        :total="pager_info.total"
        :currrent-page.sync="pager_info.pageindex"
        :page-size="pager_info.pagesize"
        @current-change="handleCurrentPagerChange"
      />
    </div>
    <el-dialog
      title="新冠病毒疫苗接种情况数据"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <el-form ref="form" style="margin-top: 20px;" :model="Xgbdymjzsj_form" label-width="180px">
        <el-form-item label="年龄段">
          <el-input v-model="Xgbdymjzsj_form.nld" />
        </el-form-item>
        <el-form-item label="第一针人数">
          <el-input v-model.number="Xgbdymjzsj_form.ydz" />
        </el-form-item>
        <el-form-item label="第二针人数">
          <el-input v-model.number="Xgbdymjzsj_form.yez" />
        </el-form-item>
        <el-form-item label="第三针人数">
          <el-input v-model.number="Xgbdymjzsj_form.ysz" />
        </el-form-item>
        <el-form-item label="加强针人数">
          <el-input v-model.number="Xgbdymjzsj_form.jqz" />
        </el-form-item>
      </el-form>
      <div style="text-align: center;width: 100%">
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button @click=" dialogVisible = false">取消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { addxgbdymjzsj, delxgbdymjzsj, getxgbdymjzsj, updatexgbdymjzsj } from '@/api/Xgbdymjzsj'
import { creat_yyyyMMddHHmmss, dateToDateStr, pager_info } from '@/utils/Tools'

export default {
  name: 'XgbdymjzsjForm',
  data() {
    return {
      pager_info: pager_info(),
      type: 1,
      total: 0,
      PageSize: 10,
      PageIndex: 1,
      dialogVisible: false,
      Xgbdymjzsj: [
        {
          id: '0121654',
          nld: 0,
          ydz: 0,
          yez: 0,
          ysz: 0,
          jqz: 0
        }
      ],
      Xgbdymjzsj_form: {
        nld: '',
        ydz: 0,
        yez: 0,
        ysz: 0,
        jqz: 0
      }
    }
  },
  created() {
    this.onload()
  },
  methods: {
    strToDateStr(val) {
      return creat_yyyyMMddHHmmss(val)
    },
    updataDate() {
      const data = {
        'Id': this.Xgbdymjzsj_form.Id,
        'CreateTime': dateToDateStr(new Date()),
        'DeleteTime': dateToDateStr(new Date()),
        'IsDel': this.Xgbdymjzsj_form.IsDel,
        'nld': this.Xgbdymjzsj_form.nld,
        'ydz': this.Xgbdymjzsj_form.ydz,
        'yez': this.Xgbdymjzsj_form.yez,
        'ysz': this.Xgbdymjzsj_form.ysz,
        'jqz': this.Xgbdymjzsj_form.jqz
      }
      updatexgbdymjzsj(data).then(res => {
        this.onload()
        this.dialogVisible = false
        this.$message.success(res.Message)
      }).catch(reason => {
        this.dialogVisible = false
        console.log(reason)
      })
    },
    edit(val) {
      this.Xgbdymjzsj_form = val
      this.dialogVisible = true
      this.type = 2
    },
    handleCurrentPagerChange(idx) {
      this.pager_info.pageindex = idx
      this.onload()
    },
    onload() {
      const that = this
      const data = {
        'PageSize': this.pager_info.pagesize,
        'PageIndex': this.pager_info.pageindex
      }
      getxgbdymjzsj(data).then(res => {
        that.Xgbdymjzsj = res.Data
        that.pager_info.total = res.Total
      }).catch(reason => {
        console.log(reason)
      })
    },
    open(status) {
      this.Xgbdymjzsj_form = {
        nld: '',
        ydz: 0,
        yez: 0,
        ysz: 0,
        jqz: 0
      }
      this.type = status
      this.dialogVisible = true
    },
    onSubmit() {
      if (this.type === 1) {
        addxgbdymjzsj(this.Xgbdymjzsj_form).then(res => {
          this.$message.success('操作成功！')
          this.onload()
          this.dialogVisible = false
        }).catch(reason => {
          this.dialogVisible = false
          console.log(reason)
        })
      } else if (this.type === 2){
        this.updataDate()
      }
      console.log('提交')
    },
    del(id) {
      this.$alert('确认删除该记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res => {
        const data = {
          'Id': id
        }
        delxgbdymjzsj(data).then(res => {
          this.$message.success('删除成功！')
          this.onload()
        }).catch(reason => {
          console.log(reason)
        })
      }).catch(reason => {
        console.log(reason)
      })
      console.log(id)
    }
  }
}
</script>

<style scoped>
/deep/ .el-pagination__rightwrapper {
  float: none !important;
}
</style>
